<template>
  <div class="plate_control">
    <div class="row">
      <div
        class="col-md-6"
        v-for="(item, index) in data"
        :key="index"
        :class="index % 2 === 1 ? 'double' : ''"
      >
        <router-link :to="{ path: item.path, params: { ...item.params } }">
          <div class="es-card">
            <div class="es-card-body">
              <div class="es-img">
                <img :src="item.img" class="es-image__img" />
              </div>
              <div class="es-tag es-tag-geekblue es-tag-checked">
                <span class="es-tag-text">{{ item.tag }}</span>
              </div>
              <h1>{{ item.title }}</h1>
              <h2>{{ item.subTitle }}</h2>
              <p>
                {{ item.desc }}
              </p>
            </div>
          </div>
        </router-link>
      </div>
    </div>
    <div
      class="es-divider es-divider-horizontal es-divider-default service_divider"
    ></div>
  </div>
</template>

<script>
export default {
  name: "PlateControl",
  props: {
    data: {
      type: Array,
      default() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss">
.plate_control {
  padding: 0 0 2rem 0;
  .double {
    margin: 1rem 0;
    clear: both;
  }
  .service_divider {
    width: 25rem;
    min-width: 25rem;
    margin: 2.75rem auto;
  }
  a {
    &:hover {
      text-decoration: none;
      color: var(--dark);
    }
  }
  .es-card {
    .es-card-body {
      h1 {
        font-size: 1.5rem;
        padding: 0 0 0.5rem 0;
      }
      h2 {
        font-size: 1rem;
        padding: 0 0 0.5rem 0;
      }
      .es-img {
        height: 23.375rem;
        background-color: var(--dark-light);
      }
    }
  }
}
</style>
